// This is the custom JavaScript file referenced by index.html. You will notice
// that this file is currently empty. By adding code to this empty file and
// then viewing index.html in a browser, you can experiment with the example
// page or follow along with the examples in the book.
//
// See README.txt for more information.

$(document).ready(function () {
    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //这是第一次的关于增大字体的代码，由于增大与减小的代码操作类似，可以糅合为一次操作
    // var $speech = $("div.speech");
    // $("#switcher-large").click(function () {
    //     var num = parseFloat($speech.css("fontSize"));
    //     num *= 1.4;
    //     $speech.css("fontSize", num + "px");
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    // var $speech = $("div.speech");
    // var defaultSize = parseFloat($speech.css("fontSize"));
    // $("#switcher button").click(function () {
    //     var num = parseFloat($speech.css("fontSize"));
    //     switch (this.id){
    //         case "switcher-large":
    //             num *= 1.4;
    //             break;
    //         case "switcher-small":
    //             num /= 1.4;
    //             break;
    //         case "switcher-default":
    //             num = parseFloat(defaultSize);
    //     }
    //
    //     $speech.css("fontSize", num + "px");
    // });
    // $("p").eq(1).hide();
    // $("a.more").click(function (event) {
    //     event.preventDefault();
    //     $("p").eq(1).slideDown();
    //     $(this).hide();
    // });

    var $speech = $("div.speech");
    var defaultSize = parseFloat($speech.css("fontSize"));
    $("#switcher button").click(function () {
        var num = parseFloat($speech.css("fontSize"));
        switch (this.id){
            case "switcher-large":
                num *= 1.4;
                break;
            case "switcher-small":
                num /= 1.4;
                break;
            case "switcher-default":
                num = parseFloat(defaultSize);
        }
        //我们也可以使用动画效果来添加CSS属性,差别就是动画可以使我们肉眼看到字体变大的过程
        $speech.animate({fontSize:num+"px"}, "slow");
        // $speech.css("fontSize", num + "px");
    });
    // $("p").eq(1).hide();
    // $("a.more").click(function (event) {
    //     event.preventDefault();
    //     $("p").eq(1).slideDown();
    //     $(this).hide();
    // })

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    // var $para = $("p").eq(1);//通过变量存储选择符，防止多次遍历DOM造成性能下降
    // $para.hide();
    // $("a.more").click(function (event) {
    //     event.stopPropagation();
    //     if($para.is(":hidden")){
    //         $para.fadeIn("slow");
    //         $(this).text("read less");
    //     }else{
    //         $para.fadeOut("slow");
    //         $(this).text("read more");
    //     }
    // });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    // var $para = $("p").eq(1);//通过变量存储选择符，防止多次遍历DOM造成性能下降
    //     $para.hide();
    //     $("a.more").click(function (event) {
    //         event.stopPropagation();
    //         $para.slideToggle("slow");//是使用slideToggle来减少代码
    //         var $link = $(this);
    //         if($link.text() === 'read more'){
    //             $link.text("read less");
    //         }else{
    //             $link.text("read more");
    //         }
    //     });

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
    //借助animate完成与slideToggle相同的效果
    var $para = $("p").eq(1);//通过变量存储选择符，防止多次遍历DOM造成性能下降
    $para.hide();
    $("a.more").click(function (event) {
        event.stopPropagation();
        //如果写成width会有一个很鬼畜的效果
        $para.animate({
            height:"toggle",
            opacity:"toggle"
        },"slow");
        var $link = $(this);
        if($link.text() === 'read more'){
            $link.text("read less");
        }else{
            $link.text("read more");
        }
    });
    //给div加上动画
    $('div.label').click(function () {
        var paraWidth = $("div.speech p").outerWidth();
        var $switcher = $(this).parent();
        var switcherWidth = $switcher.outerWidth();
        //先进行CSS定位设置，盒子才会移动，我们在使用动画之前要考虑css对animate的诸多限制
        //没有设置过定位的元素,position默认为static，这个值精确地表明我们如果不去改变元素的定位属性，它们只会静止不动
        $switcher
            .css({position:'relative'})
            .fadeTo('fast', 0.5)
            .animate({
                left:paraWidth-switcherWidth
            }, {
                duration:"slow",
                queue:false//false表示当前动画需要跟前一个动画一起执行，并不放进队列里等待执行
            })
            .fadeTo("slow", 1.0)
            // .slideUp("slow")
            // .css("background-color", "red"
                //需要明确一点，排队不能自动应用到其他非效果方法，比如.css()
                //像上边那一行就不会按照这个队列顺序执行
            // .queue(function(next){
            //     $switcher.css("background-color","red");
            //     next();
            // })
            .slideUp("slow",function () {
                $switcher.css("background-color","red");
            })
            .slideDown("slow");
    });
    $("p").eq(2)
        .css("border", "1px solid #333")
        .click(function () {
            var $clickedItem = $(this);
            $clickedItem.next().slideDown('slow', function () {
                $clickedItem.slideUp('slow');
            });
        });
    $("p").eq(3).css("background-color", "#ccc").hide();
    /*
    * 由$clickedItem.next().slideDown("slow", function(){});回调函数执行的效果可以看出，
    * 不需要使用queue仍然可以满足按顺序队列执行效果方法，所以之前的queue方法可以直接被改成
    * 使用回调函数来完成效果*/
});